<!doctype html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../assert_selection.js"></script>
<script>
const isMac = navigator.platform.indexOf('Mac') === 0;

function editable(sample) {
  return `<div contenteditable>${sample}</div>`;
}

function testIt(command_name, input, expected, description) {
  selection_test(editable(input), command_name, editable(expected),
                 description);
}

// bold
testIt('bold',
 '^<span style="font-weight: 900;"> <div>wxy</div> </span>|',
 ' <div style>^wxy|</div> ',
 'bold-1');
testIt('bold',
 '^<span style="font-weight: 900;"><div>wxy</div></span>|',
 '<div style>^wxy|</div>',
 'bold-2');
testIt('bold',
 '^<span style="font-weight: 900;"><div id="test">abc</div><div>xyz</div></span>|',
 '<div id="test" style>^abc</div><div style>xyz|</div>',
 'bold-3');
testIt('bold',
 '^<div style="font-weight: bold;">abc<div id="test">xyz</div></div>|',
 '<div style>^abc<div id="test" style>xyz|</div></div>',
 'bold-4');
testIt('bold',
 '^<span style="font-weight: bold;">abc<span id="test">xyz</span></span>|',
 '^abc<span id="test" style>xyz|</span>',
 'bold-5');
testIt('bold',
 '^<span style="font-style: italic; font-weight: bold;">abc<span id="test">xyz</span></span>|',
 '<span style="font-style: italic;">^abc<span id="test" style>xyz|</span></span>',
 'bold-6');
testIt('bold',
 '^<span style="font-weight: bold;"><div id="test">abc</div><div style="font-weight: normal;"><div>xyz</div>wxy</div></span>|',
 isMac
    ? '<div id="test" style>^abc</div><div style><div style>xyz</div>wxy|</div>'
    : '<div id="test" style><b>^abc</b></div><div style><div style><b>xyz</b></div><b>wxy|</b></div>',
 'bold-7');

// italic
testIt('italic',
 '^<span style="font-style: italic;"><div>abc</div></span>|',
 '<div style>^abc|</div>',
 'italic-1');
testIt('italic',
 '^<span style="font-style: italic;"><div id="test">abc</div><span style="font-style: oblique;">xyz</span>|',
 '<div id="test" style>^abc</div>xyz|',
 'italic-2');
testIt('italic',
 '^<span style="font-style: italic; font-weight: bold;"><div>abc</div></span>|',
 '<span style="font-weight: bold;"><div style>^abc|</div></span>',
 'italic-3');
testIt('italic',
 '^<span style="font-style: italic; text-decoration: line-through;"><div>abc</div></span>|',
 '<span style="text-decoration: line-through;"><div style>^abc|</div></span>',
 'italic-4');
testIt('italic',
 '^<span style="font-style: italic;">abc<div id="test">xyz</div><blockquote>wxy</blockquote></span>|',
 '^abc<div id="test" style>xyz</div><blockquote style>wxy|</blockquote>',
 'italic-5');
testIt('italic',
 '^<span style="font-style: italic;">abc <span id="test">xyz</span> wxy</span>|',
 '^abc <span id="test" style>xyz</span> wxy|',
 'italic-6');

// underline
testIt('underline',
 '^<span style="text-decoration: underline;"><div id="test">abc</div>xyz</span>|',
 '<div id="test" style>^abc</div>xyz|',
 'underline-1');
testIt('underline',
 '^<span style="text-decoration: underline;"><div id="test">abc</div><blockquote>xyz<br>wxy</blockquote></span>|',
 '<div id="test" style>^abc</div><blockquote style>xyz<br>wxy|</blockquote>',
 'underline-2');
testIt('underline',
 '^<span style="text-decoration: underline;">abc<div id="test">xyz</div>wxy</u>|',
 '^abc<div id="test" style>xyz</div>wxy|',
 'underline-3');
testIt('underline',
    '^<div style="text-decoration: underline;"><div>abc</span></div><div id="test">wxy</div><span style="font-style: italic;">rocks</span>|',
    '<div style><div style>^abc</div><div id="test" style>wxy</div><span style="font-style: italic;">rocks|</span></div>',
 'underline-4');
testIt('underline',
 '^<span style="text-decoration-line: underline;"><div style="text-decoration-line: line-through;">abc</div><div id="test">xyz</div></span>|',
 '<div style><strike>^abc</strike></div><div id="test" style><strike>xyz|</strike></div>',
 'underline-5');

// strike-through
testIt('strikeThrough',
 '^<span style="text-decoration-line: line-through;"><div id="test">abc</div><div style="text-decoration-line: underline;">xyz</div></span>|',
 '<div id="test" style>^abc</div><div style>xyz|</div>',
 'strike-through-1');
</script>
